<template>
  <div>
    <u-cell-group :border="false">
      <cus-cell
        title="文字"
        :border="false"
        v-if="
          editConfigCom.attribute &&
          editConfigCom.attribute.hasOwnProperty('text')
        "
      >
        <view class="u-slot-value">
          <u--input
            placeholder="请输入按钮文字"
            border="surround"
            v-model="editConfigCom.attribute.text"
          ></u--input>
        </view>
      </cus-cell>
      <cus-cell title="字体大小" :border="false">
        <div
          class="u-slot-value"
          v-if="
            editConfigCom.attribute &&
            editConfigCom.attribute.hasOwnProperty('size')
          "
        >
          <u--input
            placeholder="请输入字体大小"
            border="surround"
            v-model="fontSize"
            @blur="onInputFontSize"
            @input="onInputFontSize"
            type="number"
            style="margin-right: 10px; padding: 0 8px; width: 320rpx"
          ></u--input>
          <uni-data-select
            v-if="
              editConfigCom.attribute &&
              editConfigCom.attribute.hasOwnProperty('size')
            "
            v-model="fontSizeUnit"
            :localdata="fontSizeUnitList"
            :clear="false"
            style="width: 0"
            @change="onChangeFontSizeUnit"
          ></uni-data-select>
        </div>
      </cus-cell>

      <cus-cell title="字体颜色" :border="false">
        <div
          class="u-slot-value"
          v-if="
            editConfigCom.attribute &&
            editConfigCom.attribute.hasOwnProperty('color')
          "
        >
          <div
            @click="open('fontSizeColorPicker')"
            class="color-box"
            :style="{
              backgroundColor: editConfigCom.attribute.color,
            }"
          ></div>
        </div>
        <div class="color-picker">
          <div class="color-picker-container">
            <t-color-picker
              ref="fontSizeColorPicker"
              :color="fontColor"
              @confirm="confirmFontColor"
            ></t-color-picker>
          </div>
        </div>
      </cus-cell>
      <cus-cell title="行数" :border="false">
        <div
          class="u-slot-value"
          v-if="
            editConfigCom.attribute &&
            editConfigCom.attribute.hasOwnProperty('lines')
          "
        >
          <u-number-box
            v-model="editConfigCom.attribute.lines"
            :max="100"
          ></u-number-box>
        </div>
      </cus-cell>
      <navigate-base-config />
    </u-cell-group>
  </div>
</template>

<script>
import tColorPicker from "@/components/t-color-picker/t-color-picker.vue";
import { regexp } from "@/utils";
const { isPx, isRpx, isEm, isVw, isVh, isRem, isPercent } = regexp;
export default {
  components: { tColorPicker },
  computed: {
    pageData() {
      return this.$store.state.page.page;
    },
    editConfigComActiveId() {
      return this.$store.state.page.editConfigComActiveId;
    },
    activeIndex({ pageData, editConfigComActiveId }) {
      return pageData.items.findIndex((v) => v.id === editConfigComActiveId);
    },
    //组件本身属性
    editConfigCom({ pageData, activeIndex }) {
      return pageData.items[activeIndex];
    },
  },
  data() {
    return {
      fontColor: {},
      fontSizeUnit: "rpx",
      fontSizeUnitList: [
        { value: "rpx", text: "rpx" },
        { value: "px", text: "px" },
        { value: "rem", text: "rem" },
        { value: "em", text: "em" },
        { value: "vw", text: "vw" },
        { value: "vh", text: "vh" },
      ],
      fontSize: 0,
    };
  },
  created() {
    this.handleFontSize();
    this.handleFontColor();
  },
  methods: {
    //----字体 start----
    handleFontColor() {
      //颜色处理
      const color = this.editConfigCom?.attribute?.color
        .replace("rgba", "")
        .replace("rgb", "")
        .replace("(", "")
        .replace(")", "")
        .split(",");
      this.fontColor = Object.assign(
        {},
        {
          r: color[0] || 0,
          g: color[1] || 0,
          b: color[2] || 0,
          a: color[3] || 1,
        }
      );
      this.originalColor = this.fontColor;
    },
    confirmFontColor(e) {
      const { rgba } = e;
      console.log(e);
      this.editConfigCom.attribute.color = `rgb(${rgba.r},${rgba.g},${rgba.b})`;
      this.fontColor = rgba;
    },
    open(ref) {
      // 打开颜色选择器
      this.$refs[ref].open();
    },
    resetColor() {
      this.originalColor = {
        r: 0,
        g: 0,
        b: 0,
        a: 1,
      };
      this.fontColor = this.originalColor;
      const rgba = this.originalColor;
      this.pageData.style.backgroundColor = `rgb(${rgba.r},${rgba.g},${rgba.b})`;
    },
    handleFontSize() {
      //字体
      this.fontSize = Number(
        this.editConfigCom.attribute.size
          .replace("rpx", "")
          .replace("px", "")
          .replace("rem", "")
          .replace("em", "")
          .replace("vh", "")
          .replace("vw", "")
      );
      if (isPx(this.editConfigCom.attribute.size)) {
        this.fontSizeUnit = "px";
      }
      if (isRpx(this.editConfigCom.attribute.size)) {
        this.fontSizeUnit = "rpx";
      }
      if (isEm(this.editConfigCom.attribute.size)) {
        this.fontSizeUnit = "em";
      }
      if (isVw(this.editConfigCom.attribute.size)) {
        this.fontSizeUnit = "vw";
      }
      if (isVh(this.editConfigCom.attribute.size)) {
        this.fontSizeUnit = "vh";
      }
      if (isRem(this.editConfigCom.attribute.size)) {
        this.fontSizeUnit = "rem";
      }
      if (isPercent(this.editConfigCom.attribute.size)) {
        this.fontSizeUnit = "%";
      }
    },
    onInputFontSize() {
      this.editConfigCom.attribute.size =
        Number(this.fontSize) + this.fontSizeUnit;
    },
    onChangeFontSizeUnit(e) {
      const fontSize = Number(
        this.editConfigCom.attribute.size
          .replace("rpx", "")
          .replace("px", "")
          .replace("rem", "")
          .replace("em", "")
          .replace("vh", "")
          .replace("vw", "")
      );
      this.editConfigCom.attribute.size = Number(fontSize) + e;
    },
    //----字体 end----
  },
};
</script>

<style scoped lang="scss">
.u-slot-title {
  display: flex;
}
.u-slot-color {
  display: flex;
  align-items: center;
}
.color-box {
  margin-left: 10px;
  width: 100px;
  height: 35px;
  border: 1px solid lightgray;
}
.color-picker {
  position: absolute;
  &-container {
    position: absolute;
    top: 20px;
    //left: -15px;
    z-index: 9999;
  }
}
</style>
